<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        fdsafds{{message}}fdafda
    </div>
    <script>
    var data = {
        message:"我的数据"
    }
    // 一、初次渲染
    // 在指定范围内查找 {{message}} 字符； 根据数据把数据里的内容渲染到视图上；
    var APPEle  = document.querySelector("#app");
    var str = APPEle.innerHTML;  // 'fdafdsa{{message}}fdafda'
    // 通过正则查找 {{}} 的内容
    var reg = /\{\{([^{}]+)\}\}/; // [^{}+] 集合里不能再出现{} 
    // () 分组  [1-30] 集合 {1,5}
    // ？  + {1,}
    if(reg.test(str)){
        // {{message}}
        var $1 = RegExp.$1; 
        //RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串
        var message = data[$1];
        console.log(message);
        console.log(reg);
        // {{message}} ---->message : 我的数据
        APPEle.innerHTML = APPEle.innerHTML.replace(reg,message);
    }

    // 二、再次渲染
    // 用Object.defineProperty() 观察数据
    // 这里说一个解决死循环的问题
    // 死循环: get函数的触发条件时 data['message']  当触发get的时候  回返还data['message'] 所以get会被无限触发
    var val = data['message']
    Object.defineProperty(data,'message',{
      get:function(){
        console.log('get');
        return val // 返回值改成变量 又可以解决死循环
      },
      set:function(newvalue){
        console.log('set');
        var oldvalue = message
        // 监测到数据改变之后   用 replace方法 newvalue替换原来的oldvalue
        APPEle.innerHTML = APPEle.innerHTML.replace(oldvalue,newvalue)
        if(val != newvalue) val = newvalue
      },
      configurable: true,
      enumerable:true
    })
    console.log(data);




    </script>
</body>
</html>